<template>
    <div id="Boss_Message">
        <div>
            <!--导航栏-->
            <div>
                <!-- 返回导航条 -->
                <router-view name="header" fixed :component_name="Boss_Message"></router-view>
                <div id="Boss_Message_name">发布文章信息:</div>
            </div>
            <!--上传按钮-->
            <div>
                <!--图片上传表单-->
                <div v-if="!image">
                    <form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo">
                        <!--按钮抓取了elemet组件按钮样式（选择文件按钮）-->
                        <!--原本的上传的CSS样式-->
                        <!--新选择图片按钮-->
                        <div>
                            <!--通过用心得div去覆盖掉旧的div-->
                            <div class="el-button el-button--primary el-button--small" @click="addPic()">上传图片 </div>
                            <!--通过css样式将原本的上传样式隐藏-->
                            <input class="unDisplay_uploadBUtton" type="file" id="file" name="file" @change="onFileChange" required />
                        </div>
                    </form>
                </div>
                <div v-else>
                    <img :src="image" />
                    <button @click="removeImage()">移除图片</button>
                </div>
            </div>
            <!--图片展示列表-->
            <div v-if="images.length >0">
                <ul>
                    <li v-for="image in images">
                        <img :src="image" @click='delImage(image)' class="imgDisplayStyle" />
                        <a href="#" @click='delImage(image)'>
                            <span></span>
                        </a>
                    </li>
                </ul>
                <!--按钮抓取了elemet组件按钮样式（移除图片）-->
                <button @click="removeImage" class="el-button el-button--danger el-button--small">移除图片</button>
                <!--按钮抓取了elemet组件按钮样式（上传服务器）-->
                <button class="el-button el-button--success el-button--small" @click="doUpload()">上传到服务器</button>
            </div>
    
            <!-- 上传成功提示 -->
            <mt-popup v-model="popupVisible_1" position="top">
                <span class="popupV">图片上传成功</Span>
            </mt-popup>
            <!--测试:图片地址是否回传到前端-->
            <div v-if="txt">
                <el-button type="primary" :disabled="true"  icon="check" id="txt_check"></el-button>
                <div id="txt_1">亲！图片已经上传到服务器咯~</div>
                <!--<div>{{ imgURL }}</div>-->
                <!--图片地址需要进行拼接-->
                <!--<img :src="'http://localhost:3000/' + imgURL" class="imgDisplayStyle" />-->
            </div>
        </div>
    
        <!--表单填写区域-->
        <div>
            <!-- 测试表单 -->
            <mt-field v-model="title" label="标题" placeholder="请输入"></mt-field>
            <mt-field v-model="poster" label="发送人" placeholder="请输入"></mt-field>
            <!--<mt-field v-model="rating" label="多少分推荐" placeholder="请输入"></mt-field>-->
            <mt-field v-model="introduction" label="内容" placeholder="请输入" type="textarea" rows="10"></mt-field>
            <!-- 提交按钮 -->
            <mt-button type="primary" @click="addMge">确定</mt-button>
            <mt-button type="danger" @click="">取消</mt-button>
            <!-- 提交提示 -->
            <mt-popup v-model="popupVisible" position="top">
                <span class="tishi">信息发布成功</Span>
            </mt-popup>
        </div>
    
    </div>
</template>

<script>
import Vue from 'vue'
export default {
    name: 'Boss_Message',
    data() {
        return {
            title: '',
            poster: '',
            rating: null,
            introduction: '',
            message_id: '',
            popupVisible: false,
            images: [],
            popupVisible_1: false,
            txt: false,
            imgURL: '',
            loadingData: true,
        }
    },
    methods: {
        //添加信息
        addMge() {
            this.$store.dispatch({
                type: 'addMessage',
            })
                .then(() => {
                    this.updateMessage();
                    this.updateMessage_ok();
                })
        },
        //添加的信息时候，监听数据变化，并传到store的的actions中，
        // 通过actons中的adds方法调用mutations最后实现改变state中数据
        addschange() {
            this.$store.dispatch("adds", {
                title: this.title,
                poster: this.poster,
                introduction: this.introduction,
                rating: this.rating,
            })
        },
        updateMessage() {
            this.$store.dispatch({
                type: 'getMessage',
                callback: (result) => {
                    this.list = result.data;
                }
            });
        },
        // 信息更新
        updateMessage_ok() {
            this.popupVisible = true;
        },

        // 图片上传方法
        // 图片上传通过actions中的axios
        doUpload() {
            var uploadIMG = document.getElementById("fileinfo");
            var formdata = new FormData(uploadIMG);
            this.$store.dispatch("doUploadImg", formdata)
                .then(() => {
                    console.log("成功进入分发");
                    this.popupVisible_1 = true;
                    this.txt = true;
                })
                .catch(() => {
                    console.log("没有进入分发")
                });

        },

        //判断图片是否读取
        onFileChange(e) {
            var files = e.target.files || e.dataTransfer.files
            if (!files.length) return
            this.createImage(files)
        },
        //图片列表中添加图片
        createImage(file) {
            var file_this = this
            var reader = null
            var leng = file.length
            for (var i = 0; i < leng; i++) {
                reader = new window.FileReader()
                reader.readAsDataURL(file[i])
                reader.onload = function (e) {
                    file_this.images.push(e.target.result)
                }
            }
        },
        // 移出图片列表
        removeImage: function (e) {
            this.images = [];
        },
        // 删除显示图片
        delImage: function (image) {
            this.images.shift(image)
        },
        // 上传图片传导
        addPic() {
            var file_mig = document.getElementById("file");
            file_mig.click();
          
        },
    },
    // 监听数据变化
    watch: {
        title: function () {
            this.addschange()
        },
        poster: function () {
            this.addschange()
        },
        introduction: function () {
            this.addschange()
        },
        rating: function () {
            this.addschange()
        },
        imgURL: function () {
            this.rating = this.imgURL
        },
    },
    // 将后端返回的图片地址从store中的state中分发到这里
    computed: {
        imgURL() {
            return this.$store.state.imgURL
        }
    }
}
</script>


<style>
.tishi {
    background-color: transparent;
    color: rgba(255, 255, 255, 1);
}

.mint-popup-top {
    background-color: transparent;
}

.imgDisplayStyle {
    width: 50%;
    height: 50%
}

.unDisplay_uploadBUtton {
    font-size: 30px;
    outline: medium none;
    position: absolute;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    left: 0px;
    top: 0px;
}

.popupV {
    background-color: transparent;
    color: rgba(255, 255, 255, 1);
}

#Boss_Message_name {
    color: gray;
    font-size: 14px;
    text-align: left;
    margin-bottom: 30px;
}
#txt_1{
    margin-top: 10px;
    font-size: 13px;
    font-weight: bold;
    color: rgba(0, 200, 0, 0.7);
}
#txt_check{
    margin-top: 10px;
    background-color: transparent !important;
    border: 1px solid black !important;
    width: 100%;
}

</style>
